<template>
  <div class="bg">
    <div class="login_box">
      <div class="left">
        <div class="img_box">
          <img src="../assets/img/undraw_login_re_4vu2 1.png" alt="">
        </div>
      </div>
      <div class="right">
        <p>欢迎登陆创思设备管理系统</p>
        <el-form :model="loginForm"
         :rules="loginRules"
          ref="loginFormRef"
          label-position="top"
          class="login_form"
          >
          <el-form-item label="邮箱" prop="email" class="item">
            <el-input v-model.trim="loginForm.email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="item">
            <el-input :type="classes" v-model.trim="loginForm.password">
               <i slot="suffix" class="el-icon-view" @click="showPassword"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="loginForm.checked" class="checkbox">记住我</el-checkbox>
            <div class="forget">
              <el-button type="text" @click="forget">忘记密码</el-button>
            </div>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
        <div class="bottom">
          <span>你还没有账号?</span>
          <el-button type="text" @click="reguser"><span>注册账号</span></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    // 邮箱验证规则
    var checkEmail = (rules, value, cb) => {
      const regEmail = /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
      if (regEmail.test(value)) {
        return cb()
      } else {
        return cb(new Error('请输入合法的邮箱'))
      }
    }
    return {
      loginForm: {
        email: '123123@qq.com',
        password: '123123123'
      },
      classes: 'password',
      checked: false,
      loginRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    pwd: {
      handler: function (val, oldV) {
        // 监听登录的密码输入框，将密文显示为*
        this.pwd = this.pwd.replace(/./g, '*')
        if (oldV.length > val.length) {
          // 进行删除操作   this.loginForm.password就是定义在data中用来存实际密码的变量
          this.loginForm.password = this.loginForm.password.substring(0, this.loginForm.password.length - 1)
        } else {
          this.loginForm.password += val.replace(/[*]/g, '')
        }
      },
      deep: true
    }
  },
  methods: {
    showPassword () {
      // 点击图标是密码隐藏或显示
      if (this.classes === 'text') {
        this.classes = 'password'
        // 更换图标
      } else {
        this.classes = 'text'
      }
    },
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        // eslint-disable-next-line no-useless-return
        const data = {
          email: this.loginForm.email,
          password: this.$md5(this.loginForm.password)
        }
        if (!valid) return
        const { data: res } = await this.$http.post('http://localhost:3007/api/login', this.$qs.stringify(data))
        // console.log('res', res)
        if (res.status !== 200) return this.$message.error('登录失败！')
        this.$router.push({ path: '/home' })
      })
    },
    reguser () {
      this.$router.push({ path: '/reguser' })
    },
    forget () {
      this.$router.push({ path: '/forget' })
    }
  }
}
</script>

<style lang="less" scoped>
// @media screen and (max-width:1440px) {
//   .bg {
//     height: 100%;
//     width: 100%;
//   }
//   .login_box {
//     width: 100%;
//     height: 100%;
//     background-color: #fff;
//   }
//   .left {
//     width: 50%;
//     height: 100%;
//     background-color: #9A9AEB;
//     position: relative;
//     float: left;
//     .img_box {
//       width: 78.75%;
//       height: 33.105469%;
//       position: absolute;
//       top:28.613281%;
//       left: 13.75%;
//       img {
//         width: 100%;
//         height: 100%;
//       }
//     }
//   }
//   .right {
//     float: right;
//     height: 100%;
//     width: 50%;
//     position: relative;
//         p {
//       position: absolute;
//       width: 24.0625rem;
//       height: 2.375rem;
//       top: 14rem;
//       right: 9.25rem;
//       margin-bottom: 0px;
//       color: rgb(0, 0, 0);
//       font-family: Roboto;
//       font-size: 2rem;
//       font-weight: 500;
//       line-height: 38px;
//       letter-spacing: 0%;
//       text-align: left;
//     }

//   }
// }
//@media screen and (min-width:1440px)  {
  .bg {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    overflow-y: hidden;
  }

  .login_box {
    width: 1440px;
    height: 1024px;
    background-color: #fff;
    display: flex;
  }
  .left {
    width: 720px;
    height: 1024px;
    background-color: #9A9AEB;
    position: relative;
    .img_box {
      width: 567px;
      height: 339px;
      position: absolute;
      top:293px;
      left: 99px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right {
    width: 720px;
    height: 1024px;
    position: relative;
    p {
      position: absolute;
      width: 385px;
      height: 38px;
      top: 224px;
      right: 148px;
      margin-bottom: 0px;
      color: rgb(0, 0, 0);
      font-family: Roboto;
      font-size: 32px;
      font-weight: 500;
      line-height: 38px;
      letter-spacing: 0%;
      text-align: left;
    }
  }
  .login_form {
    position: absolute;
    top: 301px;
    left: 127px;
    width: 446px;
    margin-top: 39px;
    .item ::v-deep .el-form-item__label {
      padding-top: 15px;
      color: rgb(0, 0, 0);
      font-family: Roboto;
      font-size: 24px;
      font-weight: 400;
      line-height: 28px;
      letter-spacing: 0%;
      text-align: left;
    }
    // .el-form-item {
    //   margin-bottom: 30px;
    // }
    .el-input ::v-deep .el-input__inner {
      border:1px solid #4D4DDB;
    }
  }
  .checkbox ::v-deep .el-checkbox__label {
    padding-top: 10px;
    color: rgb(0, 0, 0);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0%;
    text-align: left;
  }
  .forget {
    float: right;
      .el-button{
        padding: 0px;
        width: 80px;
        height: 23px;
        color: rgb(0, 0, 0);
        font-family: Roboto;
        font-size: 20px;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: 0%;
        text-align: left;
      }
  }
  .btns {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    .btns ::v-deep .el-button--primary {
      width: 446px;
      height: 55px;
    }
    .el-button {
      margin: 0px;
      width: 446px;
      height: 55px;
      background: rgb(30, 30, 30);
      border-radius: 8px;
      color: rgb(255, 255, 255);
      font-family: Roboto;
      font-size: 24px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0%;
      text-align: center;
    }
    .btns ::v-deep .el-button:focus, .el-button:active {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #FFF;
    }
  }
  .bottom {
    position: absolute;
    width: 255px;
    height: 23px;
    top: 721px;
    right: 256px;
    text-align: center;
    span {
      font-family: Roboto;
      font-size: 20px;
      font-weight: 400;
      line-height: 23px;
      letter-spacing: 0%;
    }
    .el-button {
      padding: 0;
    }
  }

//}
</style>
